import { View, Image, Text } from '@tarojs/components';
import { AtTag, AtProgress, AtButton } from 'taro-ui';
import Taro from '@tarojs/taro';
import Price from '@/components/Price';
import './index.scss';

export default function ({ product }) {
  const toDetailPage = (id: number) => {
    Taro.navigateTo({
      url: `/subPages/miaosha/detail/index?miaoshaId=${id}`,
    });
  };
  return (
    <View className="product-item">
      <View className="product-info">
        <View className="product-image">
          <Image src={product.cartoon_goods_pic_url} mode="aspectFit" />
        </View>
        <View className="product-right">
          <View className="product-name">
            <AtTag size="small">全网低价</AtTag>
            <View className="name-text">{product.cartoon_kill_name}</View>
          </View>
          <View className="product-progress">
            <AtProgress
              color="#F82256"
              strokeWidth={9}
              percent={
                Math.floor((product.cartoon_kill_goods_sold_count / product.cartoon_kill_goods_stock) * 100)
              }
            />
            已抢{product.cartoon_kill_goods_sold_count}件
          </View>
          <View className="product-price">
            <Text className="miao-intro">秒杀价</Text>
            <Price price={product.cartoon_kill_goods_price} />
            <View className="down-price">
              <Text className="iconfont icon-xiajiang"></Text>
              {(product.cartoon_goods_retail_price - product.cartoon_kill_goods_price).toFixed(2)}元
            </View>
          </View>
          <View className="market-price">
            近1年最低价，即将恢复{product.cartoon_goods_retail_price}元
          </View>
          <View className="product-btn">
            <AtButton type="primary" onClick={() => toDetailPage(product.cartoon_kill_id)}>
              马上抢
            </AtButton>
          </View>
        </View>
      </View>
    </View>
  );
}
